<template>
    <ph-layer class="ph-loading-layer" :visible="visible" :alpha="state.alpha" @click="closable&&hide()">
        <ph-icon class="ph-pulse" :icon="state.icon"/>
    </ph-layer>
</template>
<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
import { PhLayer,PhIcon } from '../base'
import {PhLoadingState} from './index.type'
export default defineComponent({
    components:{
        PhLayer,PhIcon
    },
    setup(props,{expose}) {
        let restoreState:()=>void;
        const state = reactive<PhLoadingState>({
            icon:"spinner",
            alpha:false
        })
        const closable = ref(false)
        const visible = ref(false)
        const saveState = (s?:PhLoadingState)=>{
            const os = {...state}
            Object.assign(state,s)
            return ()=>{Object.assign(state,os)}
        }
        const show = (opt?:PhLoadingState)=>{
            visible.value = true
            closable.value = !!(opt&&opt.closable)
            restoreState = saveState(opt)
        }
        const hide = ()=>{
            visible.value = false
            restoreState()
        }
        return {show,hide,visible,state,closable}
    },
})
</script>
<style lang="scss">
.ph-loading-layer{
    font-size: calc(var(--phx) * 2);
    color:var(--ph-c-l2);
    &.ph-layer-alpha{
        color: var(--ph-c);
    }
}
</style>